<template>
  <div class="flip-container" @click="toggleFlip">
    <div class="flipper" :class="{ flipped: isFlipped }">
      <div class="front">
        <div class="content">Front content</div>
      </div>
      <div class="back">
        <div class="content">Back content</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false
    };
  },
  methods: {
    toggleFlip() {
      this.isFlipped = !this.isFlipped;
    }
  }
};
</script>

<style>
.flip-container {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  position: relative;
}

.flipper {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  /* 设置正面内容的样式 */
}

.back {
  /* 设置背面内容的样式 */
  transform: rotateY(180deg);
}

.flipped {
  transform: rotateY(180deg);
}
</style>